<template>
  <view>
    <head-bar-view title="编制人数" title-color="#fff" is-white-back="true"/>
    <div class="item-table-title">{{ title1 }}</div>
    <uni-table ref="table" border stripe emptyText="暂无更多数据">
      <uni-tr v-for="(item, index) in list1" :key="index">
        <uni-td>{{ item.userpro }}</uni-td>
        <uni-td align="center">{{ item.num }}</uni-td>
      </uni-tr>
    </uni-table>
    <div class="item-table-title">{{ title2 }}</div>
    <uni-table ref="table" border stripe emptyText="暂无更多数据">
      <uni-tr v-for="(item, index) in list2" :key="index">
        <uni-td>{{ item.userpro }}</uni-td>
        <uni-td align="center">{{ item.num }}</uni-td>
      </uni-tr>
    </uni-table>
  </view>
</template>

<script lang="ts">
import {Vue, Component} from "vue-property-decorator";
import HeadBarView from "@/pages/components/head_bar_view.vue";
import BaseApi from "@/api/BaseApi";
import ApiDefine from "@/api/ApiDefine";

@Component({
  components: {
    HeadBarView,
  }
})
export default class UnitUserDetailsView extends Vue {

  onLoad(option: any) {

    this.initData(option.osid)
  }

  info: any = {};
  
  async initData(osid: any) {
    let info = {
      osid: osid,
      sysuserid: uni.getStorageSync('userId'),
    }
    let url = ApiDefine.DATA_NUM_DETAILS_URL;
    if (osid == null) {
      delete info.osid;
    } else {
      url = ApiDefine.UNIT_USER_URL;
      delete info.sysuserid;
    }
    let vlaue = await BaseApi.instance().fetch(url, info)
    if (vlaue == null || vlaue.code != 200) {
      return;
    }
    this.info = vlaue.data;
  }

  get list1() {
    return this.info.fsd ?? []
  }

  get list2() {
    return this.info.sd ?? []
  }

  get title1() {
    return `三定方案人数合计：${this.info.sdnum ?? ''}人`
  }

  get title2() {
    return `实有在编人数合计：${this.info.fsdnum ?? ''}人`
  }
}
</script>

<style scoped>
.item-table-title {
  background: #f8f8f8;
  font-size: 28rpx;
  padding: 20rpx;
}
</style>